I have a four column design and I am using Bootstrap. The design renders fine in a single column in mobile devices, but in "(min-width: 768px) and (max-width: 979px)", I get four columns though there is room for only two. So clearly, the rows/spans setup would need to be rethought for those sizes.

The only way I can imagine of doing this is to have semantic CSS classes used in the HTML and only including grid classes in the CSS using LESS, and then depending on screen size, including different grid classes to achieve four or two column layout. Not sure if this would work either though.

Is this the way to go with, or am I thinking this too complicatedly?

Thanks!

Also at: https://groups.google.com/forum/#!topic/twitter-bootstrap/R5jEp0oQ_-E